<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">商品管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/giftList' }">
          <div class="div2">赠品列表</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 查询客户列表 -->
    <el-collapse-transition>
      <div class="query" v-show="!show3">
        <!-- <p class="header">选择赠品</p> -->
        <div class="header">
          <span>选择赠品</span>
          <p @click="show3 = true">收起</p>
        </div>
        <div class="polling">
          <el-form
            :inline="true"
            ref="form"
            :model="goods"
            label-width=""
            size="mini"
          >
            <el-form-item label="产品名称">
              <el-input
                placeholder="请输入产品名称"
                v-model="goods.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="产品编号">
              <el-input
                placeholder="请输入产品编号"
                v-model="goods.code"
              ></el-input>
            </el-form-item>
            <el-form-item label="选择品牌">
              <el-select
                v-model="goods.brand"
                placeholder="请选择产品品牌"
                clearable
                default-first-option
              >
                <el-option
                  v-for="items in brandselect"
                  :key="items.id"
                  :label="items.name"
                  :value="items.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="品牌分类">
              <el-cascader
                v-model="goods.category"
                :options="options"
                :props="{
                  checkStrictly: true,
                  label: 'name',
                  value: 'id',
                  children: 'children',
                }"
                clearable
              ></el-cascader>
            </el-form-item>

            <el-form-item label="部门选择">
              <el-select v-model="goods.team" placeholder="选择部门" clearable>
                <el-option
                  v-for="itemsS in logisticsCont"
                  :key="itemsS.dictId"
                  :label="itemsS.dictName"
                  :value="itemsS.dictId"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="上架与否">
              <el-select v-model="goods.status" placeholder="已上架" clearable>
                <el-option label="上架" value="0"></el-option>
                <el-option label="下架" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-on:keyup.enter="searchEvent" @click="searchEvent()"
                >搜索商品</el-button
              >
              <el-button plain icon="el-icon-refresh" @click="reset"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-collapse-transition>
    <!-- 查询客户列表 -->
    <!-- 分配用户列表 -->
    <div class="table">
      <div class="btns">
        <el-button
          type="primary"
		  size="mini"
          style="margin-bottom: 10px"
          v-if="parArray.indexOf('complimentaryAdd') != -1"
          @click="addgoodGift"
          >添加赠品</el-button
        >

        <el-button
          size="mini"
          type="primary"
          v-if="show3"
          @click="show3 = false"
          >搜索展开</el-button
        >
      </div>
      <vxe-table :data="tableData.list" align="center" :cell-style="{padding:'4px'}">
        <vxe-table-column type="seq" title="序号" width="50"></vxe-table-column>
        <vxe-table-column title="赠品图片" align="center" width="150">
          <template slot-scope="scope">
            <img v-if='scope.row.image'
              :src="img(scope.row.image)"
              alt="图片"
              width="100"
              height="100"
            />
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="code"
          title="赠品编号"
          min-width="100"
        ></vxe-table-column>
        <vxe-table-column
          field="title"
          title="赠品名称"
          show-overflow=""
          min-width="100"
        ></vxe-table-column>
        <vxe-table-column
          field="brandId"
          title="赠品品牌"
          min-width="100"
        ></vxe-table-column>
        <vxe-table-column
          field="categoryId"
          title="赠品分类"
          min-width="100"
        ></vxe-table-column>
        <vxe-table-column
          field="sellPrice"
          title="赠品单价"
          min-width="100"
        ></vxe-table-column>
        <vxe-table-column
          field="specificationName"
          title="赠品规格"
          min-width="100"
        ></vxe-table-column>
        <vxe-table-column
          field="quantityStock"
          title="可用库存"
          min-width="100"
        ></vxe-table-column>
        <vxe-table-column
          field="securityIdName"
          title="销售权限"
          min-width="100"
        ></vxe-table-column>
        <vxe-table-column
          field="statusName"
          title="状态"
          min-width="100"
        ></vxe-table-column>
        <vxe-table-column
          field="updatedTime"
          title="更新时间"
          width="100"
        ></vxe-table-column>
        <vxe-table-column fixed="right" title="操作" width="250">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top-start"
            >
              <p
                class="operation"
                v-if="parArray.indexOf('zpEdit') != -1"
                @click="toGiftDetail(scope.row)"
              >
                <!-- <img src="../../../assets/edit.png" alt=""> -->
                编辑
              </p>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="排列向上移动"
              placement="top-start"
            >
              <p
                class="operation"
                v-if="parArray.indexOf('zptop') != -1"
                @click="top(scope.row)"
              >
                <!-- <img style='width:18px;' src="../../../assets/top.png" alt=""> -->
                上移
              </p>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="排列向下移动"
              placement="top-start"
            >
              <p
                class="operation"
                v-if="parArray.indexOf('zpbottom') != -1"
                @click="bottom(scope.row)"
              >
                <!-- <img style='width:18px;'	 src="../../../assets/down1.png" alt=""> -->
                下移
              </p>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="下架"
              placement="top-start"
              v-if="scope.row.status == 0"
            >
              <p
                class="operation"
                v-if="parArray.indexOf('zpxj') != -1"
                @click="undercarriage(scope.row, 1)"
              >
                <!-- 	<img style='width:22px;height:22px;'
								 src="../../../assets/lower.png" alt=""> -->下架
              </p>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="上架"
              placement="top-start"
              v-if="scope.row.status == 1"
            >
              <p
                class="operation"
                v-if="parArray.indexOf('zpsj') != -1"
                @click="undercarriage(scope.row, 0)"
              >
                <!-- <img src="../../../assets/grounding.png"
								 alt=""> -->上架
              </p>
            </el-tooltip>
            <el-tooltip
              class="item"
              v-if="!scope.row.top"
              effect="dark"
              content="置顶"
              placement="top-start"
            >
              <p class="operation" @click="topButton(scope.row)">
                置顶<!-- <img src="../../../assets/top.png" style='width:16px;' alt=""> -->
              </p>
            </el-tooltip>
            <el-tooltip
              v-if="scope.row.top"
              class="item"
              effect="dark"
              content="取消置顶"
              placement="top-start"
            >
              <p class="operation" @click="cancelTopButton(scope.row)">
                <!-- <img src="../../../assets/down1.png" style='width:16px;'
								 alt=""> -->取消置顶
              </p>
            </el-tooltip>
          </template>
        </vxe-table-column>
      </vxe-table>
      <!-- 分配用户列表 -->
    </div>
    <div style="height:30px;"></div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum > 0">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      show3:false,
      goods: {
        name: "",
        brand: "",
        category: [],
        service: "",
        code: "",
        team: "",
      },
      date: "",
      tableData: [],
      currentPage1: 1,
      pageSize: 10,
      brandlist: "",
      options: [],
      brandselect: [],
      limits: "",
      parArray: [],
      logisticsCont: [],
      height: "500px",
    };
  },
  mounted() {
    let self = this;
    let ph = document.documentElement.clientHeight;
    self.height =
      ph -
      (390 + document.getElementsByClassName("el-form")[0].clientHeight) +
      "px";
    window.onresize = function () {
      let ph = document.documentElement.clientHeight;
      self.height =
        ph -
        (390 + document.getElementsByClassName("el-form")[0].clientHeight) +
        "px";
    };
  },
  created() {
    this.listAxios("1");
    this.brandSelect();
    this.brandSelectBox();
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "giftCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断

    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };
  },
  activated() {
    this.listAxios("1");
    this.brandSelect();
    this.brandSelectBox();
  },
  beforeRouteLeave(to,form,next){
    document.onkeydown = null;
    next();
  },
  methods: {
    topButton(e) {
      this.axios
        .get("/order/comm/complimentary/top?id=" + e.id, {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("移动成功");
            this.listAxios("1");
          } else {
            this.$message.error(res.message);
          }
        });
    },
    cancelTopButton(e) {
      this.axios
        .get("/order/comm/complimentary/topUp?id=" + e.id, {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("取消置顶成功");
            this.listAxios("1");
          } else {
            this.$message.error(res.message);
          }
        });
    },
    top(e) {
      let tempIndex = this.tableData.list.findIndex((v) => v.id === e.id);

      if (tempIndex) {
        let topId = this.tableData.list[tempIndex - 1].id;
        let curr = e.id;
        this.axios
          .get(
            "/order/comm/complimentary/sortUp?presentId=" +
              curr +
              "&targetId=" +
              topId,
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("移动成功");
              this.listAxios("1");
            } else {
              this.$message.error(res.message);
            }
          });
      }
    },
    bottom(e) {
      let tempIndex = this.tableData.list.findIndex((v) => v.id === e.id);
      if (tempIndex != this.tableData.list.length - 1) {
        let bottomId = this.tableData.list[tempIndex + 1].id;
        let curr = e.id;
        this.axios
          .get(
            "/order/comm/complimentary/sortDown?presentId=" +
              curr +
              "&targetId=" +
              bottomId,
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("移动成功");
              this.listAxios("1");
            } else {
              this.$message.error(res.message);
            }
          });
      }
    },
    reset() {
      this.goods = {
        name: "",
        brand: "",
        category: [],
        service: "",
        code: "",
        team: "",
      };
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.listAxios("1");
    },
    searchEvent() {
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.listAxios();
    },
    img(img) {
      return this.ImgHttps + img;
    },
    // 分页
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.listAxios();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.listAxios();
    },
    toGiftDetail(row) {
      this.$router.push({
        name: "addGiftGoods",
        query: {
          id: row.id,
        },
      });
    },
    addgoodGift() {
      this.$router.push({
        name: "addGiftGoods",
      });
    },
    // 商品下架/上架操作
    undercarriage(row, status) {
      // //console.log(row.id)
      this.axios
        .get(
          "/order/comm/complimentary/updateComplimentaryStatus?id=" +
            row.id +
            "&status=" +
            status
        )
        .then((res) => {
          //console.log(res);
          if (res.code == 0) {
            this.$message.success("修改成功");
            this.listAxios();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 赠品列表
    listAxios(pageNo) {
      if (pageNo == 1) {
        this.currentPage1 = 1;
        this.pageSize = 10;
      }
      this.axios
        .post("/order/comm/complimentary/list", {
          brandId: this.goods.brand,
          brandType: this.goods.category[this.goods.category.length - 1],
          pageNo: this.currentPage1,
          pageSize: this.pageSize,
          status: this.goods.status,
          title: this.goods.name.trim(),
          code: this.goods.code.trim(),
          salesAuthorityId: this.goods.team,
        })
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //** 品牌下拉 **//
    brandSelectBox() {
      this.axios.get("/order/comm/commodity/selectList").then((res) => {
        //console.log('分类')
        //console.log(res);
        if (res.code == 0) {
          this.brandselect = res.data;
        } else {
          this.$message.error(res.message);
        }
      });

      this.axios
        .get("/sys/v1/common/by/group?groupId=" + "sales_authority", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.logisticsCont = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //** 品牌下拉 **//
    // 分类下拉框
    brandSelect() {
      this.axios.get("/order/comm/commodity/selectBrand").then((res) => {
        // //console.log('分类')
        // //console.log(res);
        if (res.code == 0) {
          this.options = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.table {
  margin-top: 10px;
  margin-bottom: 40px;
}

/deep/.vxe-cell--title {
  color: #2d7edf;
}

.polling {
  margin-top: 20px;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

.query {
  background: #fff;
  padding: 10px;

  .el-form-item {
    display: inline-block;
    margin-right: 20px;
  }

  /deep/.el-button {
    padding: 7px 10px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  span {
    font-size: 15px;
  }
  p {
    font-size: 12px;
    color: #2d7edf;
  }
  p:hover {
    cursor: pointer;
  }
}

/deep/ .query .el-input__inner {
  width: 180px;
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.operation {
  // float: left;
  display: inline-block;
  padding: 0 2px;
  margin: 0 5px;
  color: #2d7ddf;
  img {
    width: 25px;
    height: 25px;
  }
}
.operation:hover {
  cursor: pointer;
}

.table {
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }

  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }

  /deep/.el-button {
    padding: 5px;
    height: 30px;
    width: 80px;
  }
}

.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.btns{
  display: flex;
  justify-content: space-between;
}
</style>
